<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>入库管理</el-breadcrumb-item>
      <el-breadcrumb-item>采购订单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-main>
        <!-- 查询表单 -->
        <el-form
          :inline="true"
          ref="searchForm"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-form-item prop="purchaseno">
            <el-input
              v-model="searchForm.purchaseno"
              placeholder="调拨单号"
              style="width: 180px"
            ></el-input>
          </el-form-item>

          <el-form-item prop="suppliername">
            <el-input
              v-model="searchForm.suppliername"
              placeholder="供应商"
              style="width: 180px"
            ></el-input>
          </el-form-item>

          <el-form-item prop="state">
            <el-select
              v-model="searchForm.state"
              placeholder="审核状态"
              style="width: 180px"
            >
              <el-option label="已审核" value="2"></el-option>
              <el-option label="待审核" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh" @click="resetForm"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="newAdd"
              >添加</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="onCheck"
              >审核</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-close" @click="cancelCheck"
              >撤销审核</el-button
            >
          </el-form-item>
        </el-form>

        <!--采购信息表-->
        <el-table
          ref="purchaseTable"
          :data="purchaseData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"> </el-table-column>
          <el-table-column prop="purchaseno" label="采购订单编号" sortable>
          </el-table-column>
          <el-table-column prop="suppliername" label="供应商名称" sortable>
          </el-table-column>
          <el-table-column prop="commoditynum" label="商品总数量" sortable>
          </el-table-column>
          <el-table-column prop="state" label="状态" sortable>
          </el-table-column>
          <el-table-column
            prop="estimatearrivaltime"
            label="预计到货时间"
            sortable
          >
          </el-table-column>
          <el-table-column prop="warehousename" label="仓库名称" sortable>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.state != 2"
                style="padding: 3px"
                @click="updateBtn(scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="mini"
                v-if="scope.row.state != 2"
                style="padding: 3px"
                @click="deleteBtn(scope.row)"
                >删除</el-button
              >
              <el-button
                @click="inputDetail(scope.row)"
                type="primary"
                size="mini"
                v-if="scope.row.state != 2"
                style="padding: 3px"
                >录入明细</el-button
              ><!--根据state条件隐藏显示按钮-->

              <el-button
                type="primary"
                size="mini"
                v-if="scope.row.state == 2"
                style="padding: 5px"
                @click="checkDetail(scope.row)"
                >查看明细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 录入明细模态框 -->
        <el-dialog title="录入明细" :visible.sync="dialogInputVisible">
          <!-- 录入明细模态框表单 -->
          <div style="margin-left: 130px">
            <el-form :model="dialogform" :rules="rules" ref="dialogform">
              <el-form-item label="采购订单编号" :label-width="formLabelWidth">
                <el-input
                  v-model="dialogform.purchaseno"
                  style="width: 250px"
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item
                label="商品编码"
                :label-width="formLabelWidth"
                prop="commoditybar"
              >
                <el-select
                  v-model="dialogform.commoditybar"
                  placeholder="请输入商品编码"
                  style="width: 250px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="数量"
                :label-width="formLabelWidth"
                prop="qty"
              >
                <el-input
                  v-model="dialogform.qty"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
              <el-form-item label-width="115px">
                <el-button type="primary" @click="addBtn" icon="el-icon-plus"
                  >新增</el-button
                >
                <el-button type="danger" @click="clear" icon="el-icon-delete"
                  >清除</el-button
                >
                <el-button type="warning" @click="endBtn" icon="el-icon-check"
                  >结束</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <!-- 录入明细模态框表格 -->
          <div>
            <el-table :data="dialogInputData" border>
              <el-table-column
                property="commoditybar"
                label="商品编码"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="commodityname"
                label="商品名称"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="qty"
                label="数量"
                sortable=""
              ></el-table-column>
            </el-table>
          </div>
        </el-dialog>

        <!-- 新增订单模态框 -->
        <el-dialog title="新增订单" :visible.sync="dialogAddVisible">
          <!-- 新增订单模态框表单 -->
          <div style="margin-left: 130px">
            <el-form :model="addform" :rules="addrules" ref="addform">
              <el-form-item
                label="采购订单编号"
                :label-width="formLabelWidth"
                prop="purchaseno"
              >
                <el-input
                  v-model="addform.purchaseno"
                  style="width: 250px"
                  readonly="readonly"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="供应商"
                :label-width="formLabelWidth"
                prop="suppliername"
              >
                <el-select
                  v-model="addform.suppliername"
                  placeholder="请选择供应商"
                  style="width: 250px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="预计到货时间"
                :label-width="formLabelWidth"
                prop="estimatearrivaltime"
              >
                <el-date-picker
                  v-model="addform.estimatearrivaltime"
                  type="datetime"
                  placeholder="选择预计到货时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="备注"
                :label-width="formLabelWidth"
                prop="remark"
              >
                <el-input
                  v-model="addform.remark"
                  placeholder="请输入备注"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
              <el-form-item label-width="115px">
                <el-button type="primary" @click="inputBtn" icon="el-icon-check"
                  >录入订单明细</el-button
                >
                <el-button @click="cancelBtn" icon="el-icon-close"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>

        <!-- 查看明细模态框 -->
        <el-dialog title="查看明细" :visible.sync="dialogResultVisible">
          <!-- 查看明细模态框表格 -->
          <div>
            <el-table :data="dialogResultData" border>
              <el-table-column
                property="commoditybar"
                label="商品编码"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="commodityname"
                label="商品名称"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="qty"
                label="数量"
                sortable=""
              ></el-table-column>
            </el-table>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        purchaseno: "",
        suppliername: "",
        state: "",
      },
      purchaseData: [{ purchaseno: 12324 }],
      multipleSelection: [],

      currentPage: 1,
      pagesize: 10,
      total: 0,

      rules: {
        commoditybar: [
          { required: true, message: "商品编码不能为空", trigger: "change" },
        ],
        qty: [{ required: true, message: "数量不能为空", trigger: "change" }],
      },

      addrules: {
        suppliername: [
          { required: true, message: "供应商名称不能为空", trigger: "change" },
        ],
        estimatearrivaltime: [
          {
            required: true,
            message: "预计到货时间不能为空",
            trigger: "change",
          },
        ],
      },

      dialogInputVisible: false,
      dialogInputData: [],

      dialogResultVisible: false,
      dialogResultData: [],

      dialogform: {
        purchaseno: "",
        commoditybar: "",
        qty: "",
      },
      formLabelWidth: "120px",

      dialogAddVisible: false,
      addform: {
        purchaseno: "",
        suppliername: "",
        estimatearrivaltime: "",
      },
    };
  },

  methods: {
    onSearch() {}, //查询按钮

    resetForm() {
      this.$refs.searchForm.resetFields(); //不想重置的内容，在表单内不加prop属性就行
    }, //重置查询表单

    onCheck() {}, // 顶部审核按钮

    cancelCheck() {}, //撤销审核按钮

    newAdd() {
      this.dialogAddVisible = true;
      var date = new Date();
      this.addform.purchaseno =
        "IP" +
        date.getFullYear() +
        (date.getMonth() + 1) +
        date.getDate() +
        date.getHours() +
        date.getMinutes() +
        date.getSeconds() +
        date.getMilliseconds();
    }, //添加按钮

    updateBtn(row) {
      this.dialogAddVisible = true;
      this.addform.purchaseno = row.purchaseno; //数据回显
    }, //修改按钮

    deleteBtn(row) {}, //删除按钮

    inputDetail(row) {
      this.dialogInputVisible = true;
      this.dialogform.purchaseno = row.purchaseno; //回显这一行的数据
    }, //录入明细按钮

    checkDetail(row) {
      this.dialogResultVisible = true;
    }, //查看明细按钮

    addBtn() {}, //录入明细模态框新增按钮

    clear() {
      this.$refs.dialogform.resetFields();
    }, //录入明细模态框清除按钮

    endBtn() {}, //录入明细模态框结束按钮

    inputBtn() {}, //录入订单明细按钮

    cancelBtn() {}, //取消按钮

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //当每页显示的条数改变时执行该方法
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.onSearch();
    },
    //当前页码变化时执行该方法
    handleCurrentChange: function (page) {
      this.currentPage = page;
      this.onSearch();
    },
  },
};
</script>

<style scoped>
</style>